<template>
  <div class="full-page slideIn">
    <header class="header border-bottom">
      <i class="iconfont icon-zuojiantou" @click="leaveAction()"
        ><span class="back">返回</span></i
      >
      <span class="zhu">注册</span>
    </header>
    <van-form @submit="onSubmit">
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field
        v-model="tel"
        type="tel"
        label="手机号"
        placeholder="请输入手机号"
        class="border-top"
        :rules="[{ pattern, message: getMsg }]"
        @blur="test()"
        @focus="reset()"
      />
      <!-- 输入密码 -->
      <van-field
        v-model="password"
        type="password"
        placeholder="请输入密码"
        label="密码"
        @blur="test()"
        :rules="[{ validator }]"
      />
      <!-- 输入性别，调起手机号键盘 -->
      <van-field type="text" label="性别">
        <template #input>
          <van-radio-group v-model="sex" direction="horizontal">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!-- 允许输入正整数，调起纯数字键盘 -->
      <van-field
        v-model="digit"
        type="number"
        label="身份证"
        placeholder="请输入身份证，成为房东时有用"
        @click="modifyShow()"
      />
      <van-field
        v-model="hobby"
        type="text"
        label="爱好"
        placeholder="请输入爱好"
      >
      </van-field>
      <van-field
        v-model="job"
        type="text"
        label="职业"
        placeholder="请输入职业"
      />
      <!--  地址 -->
      <van-field
        readonly
        clickable
        name="area"
        v-model="value"
        :value="value"
        label="地址"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>

    <van-popup v-model="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="onConfirm"
        @cancel="showArea = false"
      />
    </van-popup>

    <van-number-keyboard
      :show="show"
      random-key-order
      @blur="show = false"
      v-model="digit"
    />
  </div>
</template>

<script>
import {
  Form,
  Field,
  NumberKeyboard,
  Tag,
  Popup,
  Area,
  Button,
  RadioGroup,
  Radio,
  Toast,
} from "vant";
import { areaList } from "@vant/area-data";
console.log(areaList);
import {RegisterApi}  from '../api/auth'
export default {
  components: {
    [Field.name]: Field,
    [Form.name]: Form,
    [Button.name]: Button,
    [Area.name]: Area,
    [Popup.name]: Popup,
    [Tag.name]: Tag,
    [NumberKeyboard.name]: NumberKeyboard,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Toast.name]: Toast,
  },
  name: "register",
  data() {
    return {
      tel: "",
      text: "",
      show: false,
      hobby: "",
      sex: "",
      digit: "",
      number: "",
      password: "",
      job: "",
      pattern: /^1\d{10}$/,
      value: "",
      showArea: false,
      areaList: areaList, // 数据格式见 Area 组件文档
    };
  },
  methods: {
    reset() {
      this.msg = "";
    },
    getMsg(value) {
      if (value) {
        Toast("手机11位且为1开头");
        this.phone = "";
      }
    },
    test() {
      if (!this.tel) {
        Toast("手机号不能为空");

        return;
      }
    },
    validator(val) {
      if (!(/^(?![0-9]+$)(?![a-z]+$)(?![^\da-z]+$)[^\u4E00-\u9FA5\s]{6,12}$/.test(val))) {
        Toast("密码长度为6-12位，而且由数字、字母、.任意两种组成");
        
        return
      }
      console.log(!(/^(?![0-9]+$)(?![a-z]+$)(?![^\da-z]+$)[^\u4E00-\u9FA5\s]{6,12}$/.test(val)));
    },
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
      console.log(this.value);
    },
    modifyShow() {
      this.show = true;
    },
    leaveAction() {
      this.$router.push("/login");
    },
    async onSubmit() {
      const { data, error } = await RegisterApi({
        phone: this.tel,
        password: this.password,
        gender: this.sex,
        identitycard: this.digit,
        hobby: this.hobby,
        hometown: this.value,
        industry: this.job,
      });
      console.log(data);
      if (error) return;
      Toast("注册成功");

      this.$router.replace("/login");
    },
  },
  created(){
    console.log(this._data);
    
  }
};
</script>

<style lang="scss" scoped>
.full-page {
  background-color: rgba(244, 246, 249, 1);
}
.header {
  height: 1.1733rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin-bottom: 0.5333rem;
  position: relative;
  i {
    position: absolute;
    width: 2.6667rem;
    font-size: 0.4267rem;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5333rem;
    left: 0;
    .back {
      color: #4a73ff;
      font-size: 0.4267rem;
    }
  }
  .zhu {
    font-size: 0.4267rem;
    font-weight: bold;
    color: #32354a;
  }
  .van-cell {
    padding: 0.3733rem 0.4267rem !important;
  }
 
}
</style>